:root {
  --color-primary: #4387f4;
  --color-primary-h: 217deg;
  --color-primary-s: 89%;
  --color-primary-l: 61%;
  --color-primary-10: #f7faff;
  --color-primary-20: #f0f5fe;
  --color-primary-30: #d2e2fc;
  --color-primary-40: #b4cffb;
  --color-primary-50: #7babf7;
  --color-primary-60: #3c79dc;
  --color-primary-70: #2f5eab;
  --color-primary-80: #285192;
  --color-primary-90: #22437a;
  --color-success: #1da553;
  --color-success-20: #edf8f1;
  --color-success-30: #c9e9d6;
  --color-success-40: #a5dbba;
  --color-success-50: #61c087;
  --color-success-60: #1a944b;
  --color-warning: #ffb31a;
  --color-warning-20: #fff9ed;
  --color-warning-30: #ffedc8;
  --color-warning-40: #ffe0a3;
  --color-warning-50: #ffc95e;
  --color-warning-60: #e6a117;
  --color-danger: #f44343;
  --color-danger-20: #fef0f0;
  --color-danger-30: #fcd2d2;
  --color-danger-40: #fbb4b4;
  --color-danger-50: #f77b7b;
  --color-danger-60: #dc3c3c;
  --color-black: #333;
  --color-gray-80: #666;
  --color-gray-70: #999;
  --color-gray-50: #ccc;
  --color-gray-30: #d9d9d9;
  --color-gray-20: #e6e6e6;
  --color-gray-10: #f2f2f2;
  --color-white: #fff;
}
